<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: wo156
  Date: 2024/7/18
  Time: 上午7:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        #userTable {
            width: 100%;
            border-collapse: collapse;
        }

        #userTable th, #userTable td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        #userTable thead th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        #userTable tr:hover {
            background-color: #f5f5f5;
        }

        .editButton, .modifyButton {
            margin-right: 5px;
            padding: 5px 10px;
            cursor: pointer;
            border: none;
            border-radius: 3px;
        }

        .editButton {
            background-color: #4CAF50; /* Green */
            color: white;
        }

        .modifyButton {
            background-color: #FF9800; /* Orange */
            color: white;
        }

        /* Hover effect for buttons */
        .editButton:hover, .modifyButton:hover {
            opacity: 0.8;
        }
    </style>
</head>
<body>
<table id="userTable">
    <thead>
    <tr>
        <th>预约用户名</th>
        <th>预约姓名</th>
        <th>预约电话</th>
        <th>预约宠物编号</th>
        <th>预约宠物名称</th>
        <th>预约宠物价格</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${dogsSub}" var="dogsub">
        <tr>
            <td>${dogsub.user.username}</td>
            <td>${dogsub.user.name}</td>
            <td>${dogsub.user.telephone}</td>
            <td>${dogsub.pet.queryNumber}</td>
            <td>${dogsub.pet.name}</td>
            <td>${dogsub.pet.price}</td>
            <td>
                <button class="editButton">编辑</button>
                <button class="modifyButton">删除</button>
            </td>
        </tr>
    </c:forEach>
    <c:forEach items="${catsSub}" var="catsub">
        <tr>
            <td>${catsub.user.username}</td>
            <td>${catsub.user.name}</td>
            <td>${catsub.user.telephone}</td>
            <td>${catsub.pet.queryNumber}</td>
            <td>${catsub.pet.name}</td>
            <td>${catsub.pet.price}</td>
            <td>
                <button class="editButton">编辑</button>
                <button class="modifyButton">删除</button>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>
</body>
</html>
